<template>
  <div>
    <div class="filing">
      <div class="commontop">
        <div class="commontop-left">
          <el-input
            placeholder="项目名称、ID"
            v-model="pages.keyword"
            @change="INput"
            @clear="INput"
            @keyup.enter.native="goSearch()"
            clearable
            prefix-icon="el-icon-search"
          ></el-input>
          <el-button
            class="searchbgc"
            @click="goSearch"
            icon="iconfont icon-sousuo2"
            >搜索</el-button
          >
        </div>
        <div class="commontop-right">
          <el-button
            v-show="xsyc === '1' ? true : false"
            class="red"
            icon="iconfont icon-shanchu1"
            @click="deleteSelectItem()"
            >删除</el-button
          >
        </div>
      </div>

      <el-table
        v-loading="isLoading"
        :data="tableData"
        ref="multipleSelection"
        element-loading-spinner="el-icon-loading"
        element-loading-text="玩命加载中"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
        style="width: 100%; margin-top: 20px"
      >
        <template slot="empty">
          <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
          <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
        </template>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column
          prop="type_text"
          label="单位类型"
          width="160"
        ></el-table-column>
        <el-table-column prop="title" label="参建单位(检索阶段)">
          <template slot-scope="scope">
            <a
              @click="handleClick(scope.row)"
              style="color: blue; cursor: pointer"
              >{{ scope.row.title }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"></el-table-column>
        <el-table-column prop="responsible" label="责任者"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!--  v-if="scope.row.value1 == true ? true : false" -->
            <el-button
              class="green"
              size="mini"
              @click="handleEdit(scope.row.id)"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-button
              class="red"
              size="mini"
              @click="handleDelete(scope.row.id)"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current_page"
          :page-sizes="pageSizeArr"
          :page-size="pages.per_page"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog
        class="tab"
        title="编辑"
        width="35%"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="editForm">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入项目名称"
              v-model="editForm.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="editForm.created_at"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="责任者" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入责任者"
              v-model="editForm.responsible"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editModify('editForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog title="操作档案类型" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form">
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select clearable  v-model="form.region" placeholder="影像档案">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="goConstruction()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="匹配分类目录"
        :visible.sync="matdialogVisible"
        width="30%"
      >
        <el-form :model="matform" ref="matform">
          <el-form-item prop="classify_ids">
            <el-tree
              ref="tree"
              :data="data"
              show-checkbox
              node-key="id"
              :props="defaultProps"
            ></el-tree>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="matdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="goMatching('matform')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import commonInfo from "@/utils/common";
import {
  partCompanies,
  seepartCompanies,
  delpartCompanies,
  delpartCompaniesMore,
  AddCompanies,
  CompaniesModify,
} from "../../../../api/project/index";

export default {
  data() {
    return {
      filingType: this.$route.query.type,
      //按钮显示隐藏
      xsyc: "1",
      id: "",

      //权限id
      permissionsId: [],
      tableData: [],
      //页数
      pages: {
        per_page: 10,
        page: 1,
        project_id: "",
        keyword: "",
      },
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,
      total: 0,
      isLoading: true,
      drawer: false,
      //施工单位蒙尘
      dialogVisible: false,
      form: {
        region: "科技档案",
      },
      Options1: [
        {
          value: "选项1",
          label: "科技档案",
        },
        {
          value: "选项2",
          label: "文书档案",
        },
        {
          value: "选项3",
          label: "会计档案",
        },
        {
          value: "选项4",
          label: "照片档案",
        },
        {
          value: "选项5",
          label: "音像档案",
        },
        {
          value: "选项6",
          label: "实体档案",
        },
      ],
      Options2: [
        {
          value: "选项1",
          label: "科技档案",
        },
        {
          value: "选项4",
          label: "照片档案",
        },
        {
          value: "选项5",
          label: "音像档案",
        },
      ],
      Options3: [
        {
          value: "选项1",
          label: "科技档案",
        },
        {
          value: "选项4",
          label: "照片档案",
        },
        {
          value: "选项5",
          label: "音像档案",
        },
      ],
      options: [],
      //分类蒙尘
      defaultProps: {
        children: "children",
        label: "title",
      },
      data: [],
      type: "",

      matdialogVisible: false,
      //选中的树形id
      matform: {
        id: "",
        classify_ids: "",
      },
      //编辑蒙尘
      dialogFormVisible: false,
      editForm: {},
      options2: [],
      value1: "",
      formLabelWidth: "120px",
    };
  },
  methods: {
    async loadData(num) {
      this.pages.project_id = this.$route.query.id;
      this.pages = num;
      let res = await partCompanies(num);
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
      this.isLoading = false;
      console.log(res);
    },
    INput() {
      if (this.pages.keyword == "") {
        this.loadData(this.pages);
      }
    },
    //搜索
    async goSearch() {
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      console.log(this.pages);
      if (this.pages.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      this.pages.project_id = this.$route.query.id;
      let res = await partCompanies(this.pages);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
    },
    //编辑
    async handleEdit(id) {
      let res = await seepartCompanies(id);
      this.editForm = res.data.data;
      console.log(res);

      this.dialogFormVisible = true;
    },
    //删除
    handleDelete(id) {
      this.$confirm("确认删除？").then(async () => {
        let res = await delpartCompanies(id);
        //console.log(res);
        if (res.data.code === 200) {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "success",
          });
          this.loadData(this.pages);
        } else {
          this.$message({
            showClose: true,
            duration: 3000,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
    //点击显示施工蒙尘
    handleClick(row) {
      //console.log(row);
      this.Typetitle = sessionStorage.getItem("type");
      console.log(this.Typetitle);
      if (row.type_text == "建设单位") {
        this.options = this.Options1;
        /*   this.form.region = "科技档案"; */
        console.log(1);
      } else if (row.type_text == "施工单位") {
        this.options = this.Options2;
        /*  this.form.region = "科技档案"; */
        console.log(2);
      } else if (row.type_text == "监理单位") {
        this.options = this.Options3;
        /*  this.form.region = "科技档案"; */
        console.log(3);
      }
      this.type = row.type;
      this.dialogVisible = true;
      console.log(row);
      this.id = row.id;
      console.log("1:", this.id);
      /*  sessionStorage.setItem("title", row.title); */
      console.log(row.title);
      /*  sessionStorage.setItem("responsible", row.responsible); */
    },
    //编辑成功
    editModify(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await CompaniesModify(this.editForm);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData(this.pages);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogFormVisible = false;
      });
    },

    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    deleteSelectItem() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请先选中要删除的数据哦！ 亲",
          type: "error",
        });
      } else {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          // 显示loading
          this.$loading();
          let arr = this.multipleSelection.map((item) => item.id);
          let ids = arr.join(",");
          let res = await delpartCompaniesMore({ ids });
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData(this.pages);
            this.$loading().close();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
            this.$loading().close();
          }
        });
      }
    },
    //跳转到施工单位
    goConstruction() {
      this.$router.push({
        path: "/project/template-item/filing/matching/Searchfiles",
        query: {
          template_id: this.$route.query.template_id,
          project_id: this.$route.query.id,
          companyId: this.id,
          type: this.type,
        },
      });
    },

    /*   handleNodeClick(data) {
      console.log(data);
    }, */
  },
  created() {
    this.loadData(this.pages);
  },
  /* mounted: function () {
    this.loadData(this.pages);
  }, */
};
</script>

<style scoped lang="less">
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
}
.commontop .el-input {
  width: 20%;
  background-color: #fff;
}
</style>